<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      position: relative;
      border: 1px solid green;
      height: 400px;
    }

    .progress-bar {
      width: 40px;
      height: 40px;
      border: 10px solid red;
      border-radius: 50%;
      border-bottom: 10px solid transparent;
      position: absolute;
    }
  </style>
</head>

<body>
  <div class="progress-bar">

  </div>

  <script>
    const oDiv = document.querySelector('div.progress-bar');

    let deg = 45
    const run = () => {
      if (deg === 360) {
        deg = 0
      }
      deg += 2

      const hu = deg + Math.PI / 180

      const x = 500 + 360 * Math.cos(hu)
      const y = 500 + 140 * Math.sin(hu)

      oDiv.style.left = `${x}px`
      oDiv.style.top = `${y}px`

      requestAnimationFrame(run)
    }

    run()
  </script>
</body>

</html>